<template>
    <div class="d_flex uploadImages">

        <draggable
            class="el-upload-list el-upload-list--picture-card"
            :list="image_c"
            item-key="index"
            animation="300"
        >
            <template #item="{ element }">
                <div class="el-upload-list__item is-success">
                    <img class="el-upload-list__item-thumbnail" :src="element">
                    <label class="el-upload-list__item-status-label">
                        <el-icon class="el-icon--upload-success el-icon--check">
                            <Check/>
                        </el-icon>
                    </label>
                    <i class="el-icon--close-tip">press delete to remove</i>
                    <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="preview(element)">
                            <el-icon><zoom-in/></el-icon>
                        </span>
                        <span class="el-upload-list__item-delete" @click="remove(element)">
                            <el-icon><Delete/></el-icon>
                        </span>
                    </span>
                </div>
            </template>
        </draggable>

        <mi-upload :uploadUrl="uploadUrl"
                   :limit="limit"
                   type="image"
                   @confirm="confirm">
            <ul class="el-upload-list el-upload-list--picture-card">
                <li class="el-upload el-upload--picture-card" v-show="image_c?.length<limit">
                    <div>
                        <el-icon>
                            <Plus/>
                        </el-icon>
                    </div>
                </li>
            </ul>
            <!--            <template #tip>-->
            <!--                <el-alert v-if="setData.errMsg!=''" :title="setData.errMsg" type="error" :closable="false" />-->
            <!--            </template>-->
        </mi-upload>


        <el-dialog v-model="setData.dialogVisible">
            <img style="width: 100%" :src="setData.dialogImageUrl" alt=""/>
        </el-dialog>
    </div>


</template>

<script setup lang="ts">
import {reactive, toRefs, computed, getCurrentInstance, ComputedRef} from "vue"
import draggable from "vuedraggable";

const props = withDefaults(defineProps<{
    modelValue?: string[],
    limit?: number,
    uploadUrl?: string,
    params?: any,
}>(), {
    modelValue: () => [],
    limit: 10,
    uploadUrl: import.meta.env.VITE_APP_UPLOAD_IMG_URL,
})

const emits = defineEmits(["update:modelValue", "onChange"])

const image_c = computed({
    get: () => {
        return props.modelValue;
    },
    set: (val) => {
        emits("update:modelValue", val)
    }
})


const setData: Record<string, any> = reactive({
    dialogVisible: false,
    dialogImageUrl: '',
    errMsg: '',
    headers: {},

})
// setData.headers['Authorization'] = "Bearer " + getToken(global.adminToken) // 让每个请求携带自定义token 请根据实际情况自行修改

const remove = (url: string) => {
    // 删除路径
    let uIndex = props.modelValue.indexOf(url)
    props.modelValue.splice(uIndex, 1)

}

const preview = (url: string) => {
    setData.dialogImageUrl = url
    setData.dialogVisible = true
}

const confirm = (files: any[]) => {
    const {modelValue, limit} = props
    const num = limit - modelValue.length   // 还可以添加图片的数量
    const ups = files.filter((it,index) => {
        return index < num
    }).map((item:any) => {
        return item.path
    })
    modelValue.push(...ups)

    emits('update:modelValue', modelValue)
}

</script>

<style>
.uploadImages .el-upload-list--picture-card .el-upload-list__item, .uploadImages .el-upload--picture-card {
    width: 90px;
    height: 90px;
}
</style>
